<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--使用名为viewport的meta值，其content指定自适应设备的宽度--> 
<meta name="viewport"  content="width=device-width,  initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<title>具有全屏显示效果的页眉和页脚</title>
</head>

<body>
<!--定义标准的jQuery Mobile页面-->
<div data-role="page" data-theme="b">
  <!--固定页眉，并且具有自适应全屏效果展示-->
  <div data-role="header" data-position="fixed" data-fullscreen="true">
    <h1>欢迎使用全屏效果的页眉和页脚</h1>
  </div>
  <!--页面内容区域-->
  <div data-role="content"><br><br>
      <p>当按住此区域时，就可以看到页眉和页脚了</p>
      <p>当按住此区域时，就可以看到页眉和页脚了</p>
      <p>当按住此区域时，就可以看到页眉和页脚了</p>
      <p>当按住此区域时，就可以看到页眉和页脚了</p>
      <p>当按住此区域时，就可以看到页眉和页脚了</p>
      <p>当按住此区域时，就可以看到页眉和页脚了</p>
      <p>当按住此区域时，就可以看到页眉和页脚了</p>                                    
  </div>
   <!--页脚区域，并且具有全屏自适应内容-->
  <div data-role="footer" data-position="fixed" data-fullscreen="true">
    <h1>滚动条移动时，会自动显示</h1>
  </div>
</div>
</div> 

</body>
</html>
